<!doctype html>
<uieip type="page" value="base"></uieip>
<uieip type="reg" value="console,cms,login,resource"></uieip>
<html lang="zh">

<head>
    <uieip type="file" value="inc" src="/cms/inc/pc_head_inc.html"></uieip>
    <link rel="stylesheet" href="/scripts/editor.md/css/editormd.preview.css" />
    <uieip type="tmpl" value="cms.title"></uieip>
</head>

<body>
    <div class="container">
        <uieip type="file" value="exec" src="/cms/inc/pc_topmenu_exec.html"></uieip>
        <div id="sidebar">
            <div id="sidebar-content" style="text-align: left;">
                <uieip>_html</uieip>
            </div>
            <div class="markdown-body editormd-preview-container" id="custom-toc-container">
            </div>
        </div>
        <div id="editormd-body">
            <div id="editormd-view">
                <textarea style="display:none;" name="test-editormd-markdown-doc">
            </textarea>
            </div>
        </div>
    </div>
    <uieip type="file" value="inc" src="/cms/inc/pc_footer_inc.html"></uieip>
    <script src="/scripts/editor.md/lib/marked.min.js"></script>
    <script src="/scripts/editor.md/lib/prettify.min.js"></script>
    <script src="/scripts/editor.md/lib/raphael.min.js"></script>
    <script src="/scripts/editor.md/lib/underscore.min.js"></script>
    <script src="/scripts/editor.md/lib/sequence-diagram.min.js"></script>
    <script src="/scripts/editor.md/lib/flowchart.min.js"></script>
    <script src="/scripts/editor.md/lib/jquery.flowchart.min.js"></script>
    <script src="/scripts/editor.md/editormd.js"></script>
    <script type="text/javascript">
        var md_url = "/<uieip>select_file</uieip>";
        $(function () {
            var filetype = getFileType(md_url);

            if (filetype == "md") {
                var testEditormdView;
                fileget(md_url, function (markdown) {
                    testEditormdView = editormd.markdownToHTML("editormd-view", {
                        markdown: markdown,
                        htmlDecode: true,       // 开启 HTML 标签解析，为了安全性，默认不开启
                        htmlDecode: "style,script,iframe",  // you can filter tags decode
                        //toc             : false,
                        tocm: true,    // Using [TOCM]
                        tocContainer: "#custom-toc-container", // 自定义 ToC 容器层
                        //gfm             : false,
                        //tocDropdown     : true,
                        // markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
                        //emoji: true,
                        taskList: true,
                        tex: true,  // 默认不解析
                        flowChart: true,  // 默认不解析
                        sequenceDiagram: true,  // 默认不解析
                    });

                    $("#editormd-view").find("a").each(function () {
                        var $a = $(this);
                        if ((!$a.hasClass("reference-link")) && !($a.attr("href") === undefined)) {
                            $a.attr("target", "_blank");
                        }
                    });
                    
                    onresize();
                });
            } else if (filetype == "htmls") {
                fileget(md_url, function (htmls) {
                    var titles_ = "";
                    var $htmls = $('<div>' + htmls + '</div>');
                    var i = 1;
                    while (i < 10) {
                        if ($htmls.find('h' + i).length == 0) {
                            i++;
                        } else {
                            break;
                        }
                    }

                    var $hs = $htmls.find('h' + i);
                    if ($hs.length > 0) {
                        titles_ += '<div class="markdown-toc editormd-markdown-toc">';
                        titles_ += '<ul class="markdown-toc-list">';
                        for (var i_ = 0; i_ < $hs.length; i_++) {
                            var $li = $($hs[i_]);
                            $li.before('<a id="link_' + i_ + '"></a>');
                            titles_ += '<li>';
                            titles_ += '   <a href="#' + ("link_" + i_) + '">' + $li.text() + '</a>';

                            var $hs_subs = [];
                            var $li_next = $li.next();
                            while ($li_next.length > 0) {
                                var tagname = $li_next[0].tagName.toLowerCase();
                                if (tagname == 'h' + (i + 1)) {
                                    $hs_subs.push($li_next);
                                }

                                if (tagname == 'h' + i) {
                                    break;
                                }

                                $li_next = $li_next.next();
                            }

                            if ($hs_subs.length > 0) {
                                titles_ += '<ul>';
                                for (var j = 0; j < $hs_subs.length; j++) {
                                    var $li_sub = $($hs_subs[j]);
                                    $li_sub.before('<a id="link_' + i_ + "_" + j + '"></a>');
                                    titles_ += '<li>';
                                    titles_ += '   <a href="#' + ("link_" + i_ + "_" + j) + '">' + $li_sub.text() + '</a>';
                                    titles_ += '</li>';
                                }
                                titles_ += '</ul>';
                            }

                            titles_ += '</li>';
                        }

                        titles_ += '<li>';
                        titles_ += '   <a href="#editormd-view">top</a>';
                        titles_ += '</li>';

                        titles_ += '</ul>';
                        titles_ += '</div>';
                    }

                    $("#custom-toc-container").html(titles_);

                    var h_ = `<div class="panel">
                        <div class="panel-body">`+
                        '<lable id="link_top"></lable>' +
                        $htmls.html() +
                        `</div>
                        </div>`;
                    $("#editormd-view").append(h_);

                    onresize();
                });
            }


            $(window).resize(function () {
                onresize();
            });
            onresize();
        });

        function onresize() {
            $("#editormd-body").css({ "margin-bottom": "0px" });
            var $foot_ = $(".footer .container");
            var h_ = parseInt($(document).height() - ($foot_.offset().top + $foot_.height() + 15));

            if (h_ > 0) {
                $("#editormd-body").css({ "margin-bottom": h_ + "px" });
            }

            h_ = parseInt(window.innerHeight - 90);
            if (h_ > 0) {
                $("#sidebar").css({ "height": h_ + "px" });
            }
            $(".footer .container").css({ "padding-left": "310px" });
        }

        function getFileType(sFileTitle) {
            let pattern = /\.{1}[A-Za-z]{1,}$/;
            let fileType01 = sFileTitle.substring(pattern.exec(sFileTitle).index + 1, sFileTitle.length);  //index是点的位置。点的位置加1再到结尾
            return fileType01;
        }

        function fileget(fileid, callback) {
            var formData = new FormData();
            formData.append("action", "downfile");
            formData.append("errhtml", "false");
            formData.append("file", fileid);
            $.ajax({
                type: 'POST',
                url: "_resource.html",
                data: formData,
                processData: false,
                contentType: false,
                dataType: "text",
                success: function (text) {
                    //console.log(text);
                    callback(text);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log(XMLHttpRequest, textStatus, errorThrown);
                    callback(XMLHttpRequest.responseText);
                }
            });
        }
    </script>

    <script runat="server">
        var lg_state = login.state();

        var _html = "";

        var path = request.data("cms.title").name;
        var first_file = "";
        var select_file = "";
        var _md_text = "";

        var res_data = resource.ujson("document/data.ujson");
        if (res_data.error == 0) {
            _html = getnav(res_data.data, 1).html;
            //_html += JSON.stringify(res_data.data);

            if (select_file == "") {
                select_file = first_file;
            }
            if (select_file == "") {
                select_file = "readme.md";
            }
        } else {
            _html = res_data.info;
        }


        function getnav(rows, level) {
            var select = false;
            if (rows.length == 0) {
                return { html: "", select: select };
            }
            var h_ = '<ul class="menu' + level + '">';
            for (var i = 0; i < rows.length; i++) {
                var item = rows[i];
                var system = item.system;
                if (system === undefined) {
                    system = false;
                }
                if (system && lg_state) {
                    system = false;
                }
                if (system) {
                    continue;
                }

                if (first_file == "" && item.file != "") {
                    first_file = item.file;
                }

                var s_html = { html: "", select: select };;
                if (typeof item.subs == "object") {
                    s_html = getnav(item.subs, level + 1);
                }
                h_ += '<li>';
                if (item.path == path) {
                    select = true;
                    select_file = item.file;
                    h_ += ' <a class="active" href="javascript:void(0);">';
                } else {
                    h_ += ' <a href="' + item.path + '.html">';
                }

                h_ += item.name + '</a>';

                if (s_html.select) {
                    select = true;
                }

                if (select) {
                    if (level == 1) {
                        select = false;
                    }

                    h_ += s_html.html;
                }

                h_ += '</li>';
            }
            h_ += '</ul>';

            return { html: h_, select: select };
        }
    </script>
</body>

</html>